import { Component, Input, OnInit } from '@angular/core';

declare const $: any;

@Component({
    selector: 'op-horizontal-timeline',
    templateUrl: './horizontal-timeline.component.html',
    styleUrls: ['./horizontal-timeline.component.scss']
})
export class HorizontalTimelineComponent implements OnInit {
    @Input() data: any[];

    constructor() { }

    ngOnInit(): void {
        this.loadData();
    }

    private loadData(): void {
        let param = {
            data: this.data,
            id: 'cxTime',
            width: '200px',
            index: 0
        }

        let Timeline = this.getTimelineFunction();
        new Timeline(param);
    }

    private getTimelineFunction(): any {
        let defaults = {
            data: [], 			// 展示数据
            id: '', 			// 判定dom ID
            props: { 			// 参数反显字段名
                name: 'topLabel',
                key: 'bottomLabel',
            },
            index: 0, 			//默认当前选中
            width: '150px',
        };

        let TimeAxis = function (options) {
            this.options = Object.assign(defaults, options);
            this.props = this.options.props;
            this.id = this.options.id;
            this.width = this.options.width;
            this.init();
        };

        TimeAxis.prototype = {
            // 组件初始化
            init: function () {
                // 生成时间轴盒子html
                this.setTimeBox();
            },

            // 生成时间轴盒子html
            setTimeBox: function () {
                let id = "#" + this.id;
                let html = '<span>&lt;</span> <div class="cx-time-box"> <ul style="white-space: nowrap; margin: 0; height: 100%;"></ul></div><span>&gt;</span>';

                $(id).empty().append(html);

                // 生成时间轴html
                this.setTimeAxisHtml();

                let self = this;

                $(id + '>span:first').on('click', function () {
                    self.timeAxisMove(-1);
                });

                $(id + '>span:last').on('click', function () {
                    self.timeAxisMove(1);
                })
            },

            // 生成时间轴html
            setTimeAxisHtml: function () {
                let list = this.options.data || [];
                let html = '';
                let self = this;

                $.each(list, function (index, item) {
                    html += '<li style="outline: none; display: inline-block; list-style-type: none; margin: 0px;" class="cx-round-box cx-round-box' + index + '">';
                    html += '<div class="cx-time-top">' + item[self.props.name] + '</div>';
                    html += '<div class="cx-time-round" data-index="' + index + '"></div>';
                    html += '<div class="cx-time-bottom">' + item[self.props.key] + '</div>';
                    html += '</li>';

                    if (index != list.length - 1) {
                        html += '<li style="outline: none; display: inline-block; list-style-type: none; margin: 0px;" class="cx-time-line" style="width: ' + self.width + '"></li>';
                    }
                });

                let cls = "#" + this.id + ' ul';
                $(cls).empty().append(html);

                $(cls + ' .cx-time-round').on('click', function () {
                    self.options.index = $(this).data('index');
                    self.timeAxisActive();
                })

                this.timeAxisMove(0);
            },

            //点击连边移动选中时间节点
            timeAxisMove: function (num) {
                let list = this.options.data || [];
                this.options.index += num;

                if (this.options.index < 0) {
                    this.options.index = list.length - 1;
                }

                if (this.options.index > list.length - 1) {
                    this.options.index = 0;
                }

                this.timeAxisRoll();
                this.timeAxisActive(this.options.index);
            },

            //选中节点左右滚动
            timeAxisRoll: function () {
                let list = this.options.data || [];

                let width = parseInt(this.width);
                let roll = -(this.options.index * width);
                let widthBox = $('.cx-time-box').width();					//时间轴宽度盒子总宽度
                let widthBox1 = Math.abs(list.length * width); 				//实际总宽度

                if (widthBox > widthBox1) {
                    return
                }

                let i = parseInt((widthBox / width).toString());			//显示时间轴条数
                let timeAxisLast = this.options.index == list.length - 1;	//是否选中的最后一个参数

                if (timeAxisLast) {
                    roll = -(widthBox1 - widthBox);
                }

                if (this.options.index + i > list.length && !timeAxisLast) {
                    return
                }

                let cla = "#" + this.id + ' ul li';

                $(cla).animate({
                    'left': roll + 'px'
                });
            },

            // 前后滑动点击事件
            timeAxisActive: function (num) {
                $('.cx-round-box').removeClass('cx-time-active');
                $('.cx-round-box' + this.options.index).addClass('cx-time-active');
            }
        };

        return TimeAxis;
    }
}